<template>
	<div>
		<div class="content-left-box">
			<div class="contnet-left-top-box">
				<div class="content-menu-icon-box">
					<img src="../assets/menu.png" alt="">
				</div>
				<div class="contnet-menu-title-box">
					展商服务
				</div>
			</div>
			<el-menu :default-active="activeIndex" background-color="rgb(0, 102, 173)" active-text-color="#fff"
				class="el-menu-vertical content-left-item-box">
				<el-menu-item index="1">
					<router-link class="content-left-item-box-a" to="/index">
						<span class="content-left-font">展商工作提示</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="2">
					<router-link class="content-left-item-box-a" to="/agreement">
						<span class="content-left-font">签订安全责任书</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="3">
					<router-link class="content-left-item-box-a" to="/journal-content">
						<span class="content-left-font">会刊内容提交</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="4">
					<router-link class="content-left-item-box-a" to="/exhibitors-certificate">
						<span class="content-left-font">展商证件申请</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="5">
					<router-link class="content-left-item-box-a" to="/exhibitors-download">
						<span class="content-left-font">展商下载专区</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="6">
					<router-link class="content-left-item-box-a" to="/reset-password">
						<span class="content-left-font">登录密码重置</span>
					</router-link>
				</el-menu-item>
				<el-menu-item index="7" @click="logoutLogin">
					<span class="content-left-font">退出登录</span>
				</el-menu-item>
			</el-menu>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'LeftMenuComponent',
		data() {
			return {};
		},
		methods: {
			logoutLogin() {
				this.$confirm('确定要退出登录吗？, 是否继续?', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					localStorage.clear('exhibitor_token');
					this.$message({
						type: 'success',
						message: '退出成功!'
					});
					this.$router.push("/login")
				}).catch(() => {

				});
			}
		},
		props: {
			activeIndex: {
				type: String,
				default: '1'
			}
		},
	}
</script>

<style>
	.el-menu .el-menu-item.is-active a {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-item a {
		text-decoration: none;
		color: rgb(0, 102, 173);
		background: none;
	}

	.el-menu-item:hover {
		color: #fff !important;
		background-color: rgb(0, 102, 173);
	}

	.el-menu-item:hover .content-left-item-box-a {
		color: #fff !important;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 14px;
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		line-height: 3.1;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}
</style>